<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="mb10">
        <form-selections :is-active="isActive" :items="formItems" :query-param.sync="queryParam" display="block" @handleSearch="handleSearch">
          <el-button size="mini" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="mini" class="filter-item" icon="el-icon-refresh" @click="handleRefresh">
            刷新
          </el-button>
        </form-selections>
        <div>
          <el-button v-action="'job@save'" size="mini" class="filter-item fr" type="primary" icon="el-icon-plus" @click="handleCreate()">
            新增
          </el-button>
        </div>
      </div>
    </div>
    <!-- <el-button v-if="this.selectedIds.length" size="small" class="filter-item mb-5" type="danger" icon="el-icon-delete" @click="handleMultiDelete">
      批量删除
    </el-button> -->
    <div v-loading="loading">
      <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column label="岗位名称" prop="job_name" align="center" />
        <el-table-column prop="coding" label="编码" align="center" />
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="job">
            <el-button v-if="job.row.status === 1" size="small">启用</el-button>
            <el-button v-else size="small" type="danger">禁用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" align="center" />
        <el-table-column label="操作" align="center">
          <template slot-scope="job">
            <el-button v-action="'job@update'" :disabled="job.row.id === 1?true:false" size="small" type="primary" icon="el-icon-edit" @click="handleUpdate(job.row)" />
            <el-button v-action="'job@delete'" :disabled="job.row.id === 1?true:false" size="small" type="danger" icon="el-icon-delete" @click="handleDelete(job.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination background class="pagination-container" :current-page="paginate.current" hide-on-single-page :page-sizes="paginate.sizes" :page-size="paginate.limit" :layout="paginate.layout" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> -->
      <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

    </div>
    <!----------------------------------- 部门 ---------------------------------------------->
    <el-dialog :title="title" :visible.sync="formVisible" width="30%" @close="handleCancel">
      <el-form :ref="formName" :model="formFieldsData" :rules="rules">
        <el-form-item label="岗位名称" :label-width="formLabelWidth" prop="job_name">
          <el-input v-model="formFieldsData.job_name" style="width: 92%" placeholder="请输入岗位名称" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="编码" :label-width="formLabelWidth" prop="coding">
          <el-input v-model="formFieldsData.coding" style="width: 92%" placeholder="请输入编码" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-radio v-model="formFieldsData.status" :label="1" checked>启用</el-radio>
          <el-radio v-model="formFieldsData.status" :label="2">禁用</el-radio>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth" prop="sort">
          <el-input-number v-model="formFieldsData.sort" :min="1" :max="100000" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
export default {
  name: 'SystemJobs',
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      componentName: 'SystemJobs',
      formName: 'jobs',
      formLabelWidth: '120px',
      // 用户搜索
      queryParam: {
        job_name: '',
        status: ''
      },
      formItems: [
        {
          label: '岗位名称',
          key: 'job_name',
          type: 'input',
          placeholder: '请输入岗位名称'
        },
        {
          label: '状态',
          key: 'status',
          type: 'select',
          options: [
            {
              label: '启用',
              value: '1'
            },
            {
              label: '禁用',
              value: '2'
            }
          ]
        }
      ],
      formVisible: false,
      formFieldsData: {
        job_name: '',
        coding: '',
        status: 1,
        sort: 1
      },
      url: 'jobs',
      // 表单验证
      rules: {
        job_name: [
          { required: true, message: '请输入岗位名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ]
      }
    }
  }
}
</script>
<style scoped>
.filter-container {
  border: none;
}
</style>
